<!doctype html>
<html>
  <head>
    <style>
    body {
        background-color: rgb(255,248,220);
    }
    fieldset {
        background-color: orange;
        padding: 8px;
        border: 0;
        width: 700px;
    }
    a {
        font-size: 16px;
        margin: 4px 10px;
    }
    .dictNameHeader {
        display: inline-block;
        margin: 4px 8px;
        width: 200px;
        height: 25px;
        font-size: 12px;
        font-weight: bold;
    }
    .dictUrlHeader {
        display: inline-block;
        margin: 4px 8px;
        width: 300px;
        height: 25px;
        font-size: 14px;
        font-weight: bold;
    }
    .existingDictName {
        display: inline-block;
        background-color: rgb(255,248,220);
        margin: 4px 8px;
        width: 200px;
        line-height: 25px;
        font-size: 12px;
    }
    .existingDictUrl {
        background-color: rgb(255,248,220);
        margin: 4px 8px;
        width: 300px;
        line-height: 25px;
        border: none;
        font-size: 12px;
    }
    .dictAddName {
        box-sizing: border-box;
        margin: 4px 8px;
        width: 200px;
        height: 25px;
        font-size: 12px;
    }
    .dictAddUrl {
        box-sizing: border-box;
        margin: 4px 8px;
        width: 300px;
        height: 25px;
        font-size: 12px;
    }
    .cbLabel {
        vertical-align: middle;
        font-size: 14px;
        padding: 2px;
    }
    .cbHeaderLabel {
        vertical-align: middle;
        padding: 2px;
        font-size: 14px;
    }
    .imgButton {
        background-color: orange;
        border: none;
        padding: 0px 0px 0px 0px;
        margin: 0px 4px 0px 10px;
        cursor: pointer;
    }
    .longButton {
        width: 150px;
        background-color: #4CAF50; /* Green */
        border: none;
        color: white;
        padding: 4px 6px;
        text-decoration: none;
        display: inline-block;
        font-size: 14px;
        margin: 4px 8px;
        transition-duration: 0.4s;
        cursor: pointer;
    }
    .longButton:hover {
        background-color: #3e8e41;
    }
    .longRedButton {
        width: 150px;
        background-color: #ce0000; /* Red */
        border: none;
        color: white;
        padding: 4px 6px;
        text-decoration: none;
        display: none;
        font-size: 14px;
        margin: 4px 8px;
        transition-duration: 0.4s;
        cursor: pointer;
    }
    .longRedButton:hover {
        background-color: #930000;
    }
    .shortButton {
        width: 50px;
        background-color: #4CAF50; /* Green */
        border: none;
        color: white;
        padding: 2px 6px;
        text-decoration: none;
        display: inline-block;
        font-size: 14px;
        margin: 4px 2px;
        transition-duration: 0.4s;
        cursor: pointer;
    }
    .shortButton:hover {
        background-color: #3e8e41;
    }
    .hlExample {
        font-size: 16px;
        margin: 4px 2px;
    }
    .smallHeader {
        font-size: 16px;
        margin: 4px 2px;
        font-weight: bold;
    }
    #wordsBlock {
        margin: 4px 18px;
    }
    #idiomsBlock {
        margin: 4px 18px;
    }
    #debugControl {
        display: none;
        margin: 4px 18px;
    }
    #syncStatusFeedback {
        display: none;
        color: #ce0000;
    }
    #lastSyncDate {
        display: none;
    }
    .radioBlock {
        margin: 4px 18px;
    }
    .wdInfo {
        font-size: 14px;
        margin: 4px 20px;
    }
    </style>
    <title>Advanced Settings</title>
    <script src="common_lib.js"></script>
    <script src="FileSaver.js"></script>
    <script src="context_menu_lib.js"></script>
    <script src="adjust.js"></script>
  </head>
  <body>
  <div id="debugControl" class="debugControlBlock">
    <input type="text" id="setToStorageKey" class="dictAddUrl"><input type="text" id="setToStorageVal" class="dictAddUrl"><button class="longButton" id="setToStorageBtn">storage set dbg</button>
    <br>
    <input type="text" id="getFromStorageKey" class="dictAddUrl"><button class="longButton" id="getFromStorageBtn">storage get dbg</button>
    <br>
    <button class="longButton" id="testManifestWarningsBtn">view manifest warnings</button>
  </div>
  <fieldset>
    <button class="longButton" id="saveVocab">__MSG_saveVocab__</button>
    <button class="longButton" id="loadVocab">__MSG_loadVocab__</button>
    <br>
    <br>
  </fieldset>
  <br>
  <fieldset>
    <span class="smallHeader">Backup and sync with Cloudflare R2.</span><a href="example.com" target="_blank" id="moreInfoLink">More Info</a>
    <br>
    <br>
    
    <!-- R2 Configuration Section -->
    <div class="radioBlock">
      <span class="smallHeader">R2 Configuration</span>
      <br><br>
      <label for="r2WorkerUrl">Worker URL:</label><br>
      <input type="text" id="r2WorkerUrl" placeholder="https://your-worker.your-subdomain.workers.dev" style="width: 400px;">
      <br><br>
      <label for="r2ApiToken">API Token:</label><br>
      <input type="password" id="r2ApiToken" placeholder="Your R2 API Token" style="width: 400px;">
      <br><br>
      <button class="longButton" id="saveR2Config">Save Configuration</button>
      <span id="r2ConfigStatus" style="display: none; margin-left: 10px; color: green;"></span>
    </div>
    <br>
    
    <button class="longButton" id="r2SyncButton">Synchronize Now</button>
    <button class="longRedButton" id="r2StopSyncButton">Stop Sync</button>
    <br>
    <br>
    <div class="radioBlock">
      <span id="lastSyncDate"></span>
      <br>
      <span id="syncStatusFeedback"></span>
    </div>
    <br>
  </fieldset>
  <br>

  <!--pronunciation section-->
  <div id="adjustPronunciationSection">
      <fieldset>
          <span class="smallHeader">Adjust Pronunciation</span><br>
          <input type="checkbox" id="pronunciationEnabled"/>Enable Auto Pronunciation
      </fieldset>
  </div>
  <br>

  <div id="adjustBubbleSection">
    <fieldset>
          <span class="smallHeader">__MSG_adjustPopupHlHeader__</span><br>
          <br>
          <form>
          <input type="radio" name="hlBubble" id="hlb_never"><span class="cbLabel">__MSG_rbNever__</span><br>
          <input type="radio" name="hlBubble" id="hlb_key"><span class="cbLabel">__MSG_rbKey__</span><br>
          <input type="radio" name="hlBubble" id="hlb_always"><span class="cbLabel">__MSG_rbAlways__</span><br>
          </form>
        <br>
        <br>
          <span class="smallHeader">__MSG_adjustPopupOwHeader__</span><br>
          <br>
          <form>
          <input type="radio" name="owBubble" id="owb_never"><span class="cbLabel">__MSG_rbNever__</span><br>
          <input type="radio" name="owBubble" id="owb_key"><span class="cbLabel">__MSG_rbKey__</span><br>
          <input type="radio" name="owBubble" id="owb_always"><span class="cbLabel">__MSG_rbAlways__</span><br>
          </form>
    </fieldset>
  </div>
  <br>
  <div id="adjustOnlineDictsSection">
    <fieldset>
        <span class="smallHeader">__MSG_adjustOnlineDicts__</span><br>
        <br>
        <span class="dictNameHeader">__MSG_dictNameHeader__</span><span class="dictUrlHeader">__MSG_dictUrlHeader__</span><br>
        <div id="existingDictsBlock">
        </div>
        <input type="text" id="addDictName" class="dictAddName"><input type="text" id="addDictUrl" class="dictAddUrl"><button class="shortButton" id="testNewDict">__MSG_testBtn__</button><button class="imgButton" id="addDict"><img src="add.png"></button><br>
        <button class="longButton" id="defaultDicts">__MSG_restoreDefaults__</button>
    </fieldset>
  </div>
  <br>
  <div id="adjustSection">
    <fieldset>
      <span class="smallHeader">__MSG_adjustColorsHeader__</span><br>
      <br>
      <input type="checkbox" class="checkbox" id="wordsEnabled"><span class="cbHeaderLabel">__MSG_enableWordsLabel__</span><br>
      <div id="wordsBlock">
        <input type="checkbox" class="checkbox" id="wordsBold"><span class="cbLabel">__MSG_useBold__</span><br>
        <input type="checkbox" class="checkbox" id="wordsColor"><span class="cbLabel">__MSG_useText__</span><br>
        <div id="wcRadioBlock" class="radioBlock">
          <form>
          <input type="radio" name="wordColor" id="wc1"><label for="wc1" style="color:red; background-color:red">___</label>
          <input type="radio" name="wordColor" id="wc2"><label for="wc2" style="color:green; background-color:green">___</label>
          <input type="radio" name="wordColor" id="wc3"><label for="wc3" style="color:blue; background-color:blue">___</label>
          <input type="radio" name="wordColor" id="wc4"><label for="wc4" style="color:yellow; background-color:yellow">___</label>
          <input type="radio" name="wordColor" id="wc5"><label for="wc5" style="color:black; background-color:black">___</label>
          </form>
        </div>
        <input type="checkbox" class="checkbox" id="wordsBackground"><span class="cbLabel">__MSG_useBackground__</span><br>
        <div id="wbRadioBlock" class="radioBlock">
          <form>
          <input type="radio" name="wordBackground" id="wb1"><label for="wb1" style="color:#fff8dc; background-color:#fff8dc">___</label>
          <input type="radio" name="wordBackground" id="wb2"><label for="wb2" style="color:#d2d2ff; background-color:#d2d2ff">___</label>
          <input type="radio" name="wordBackground" id="wb3"><label for="wb3" style="color:#d2ffd2; background-color:#d2ffd2">___</label>
          <input type="radio" name="wordBackground" id="wb4"><label for="wb4" style="color:#c8ffff; background-color:#c8ffff">___</label>
          <input type="radio" name="wordBackground" id="wb5"><label for="wb5" style="color:#ffffff; background-color:#ffffff">___</label>
          </form>
        </div>
        <br>
        <br>
        <span class="hlExample">Example of <span id="wql"></span><span id="wordHlText">highlighted</span><span id="wqr"></span> English word.</span><br>
        <br>
      </div>
      <br>
      <br>
      <br>

      <input type="checkbox" class="checkbox" id="idiomsEnabled"><span class="cbHeaderLabel">__MSG_enableIdiomsLabel__</span><br>
      <div id="idiomsBlock">
        <input type="checkbox" class="checkbox" id="idiomsBold"><span class="cbLabel">__MSG_useBold__</span><br>
        <input type="checkbox" class="checkbox" id="idiomsColor"><span class="cbLabel">__MSG_useText__</span><br>
        <div id="icRadioBlock" class="radioBlock">
          <form>
          <input type="radio" name="idiomColor" id="ic1"><label for="ic1" style="color:red; background-color:red">___</label>
          <input type="radio" name="idiomColor" id="ic2"><label for="ic2" style="color:green; background-color:green">___</label>
          <input type="radio" name="idiomColor" id="ic3"><label for="ic3" style="color:blue; background-color:blue">___</label>
          <input type="radio" name="idiomColor" id="ic4"><label for="ic4" style="color:yellow; background-color:yellow">___</label>
          <input type="radio" name="idiomColor" id="ic5"><label for="ic5" style="color:black; background-color:black">___</label>
          </form>
        </div>
        <input type="checkbox" class="checkbox" id="idiomsBackground"><span class="cbLabel">__MSG_useBackground__</span><br>
        <div id="ibRadioBlock" class="radioBlock">
          <form>
          <input type="radio" name="idiomBackground" id="ib1"><label for="ib1" style="color:#fff8dc; background-color:#fff8dc">___</label>
          <input type="radio" name="idiomBackground" id="ib2"><label for="ib2" style="color:#d2d2ff; background-color:#d2d2ff">___</label>
          <input type="radio" name="idiomBackground" id="ib3"><label for="ib3" style="color:#d2ffd2; background-color:#d2ffd2">___</label>
          <input type="radio" name="idiomBackground" id="ib4"><label for="ib4" style="color:#c8ffff; background-color:#c8ffff">___</label>
          <input type="radio" name="idiomBackground" id="ib5"><label for="ib5" style="color:#ffffff; background-color:#ffffff">___</label>
          </form>
        </div>
        <br>
        <br>
        <span class="hlExample">Example of <span id="iql"></span><span id="idiomHlText">highlighted English</span><span id="iqr"></span> expression.</span><br>
        <br>
      </div>
      <button class="longButton" id="saveVisuals">__MSG_saveVisuals__</button>
    </fieldset>
  </div>
  </body>
</html>
